<template>
  <div id="clamis">
    <h1 class="clamis">修改理赔</h1>
    <el-table :data="claims" style="width: 100%">
      <el-table-column prop="ordersId._id" label="所属订单"> </el-table-column>
      <el-table-column prop="applyTime" label="申请理赔时间"> </el-table-column>
      <el-table-column prop="accidentTim" label="事故时间"> </el-table-column>
      <el-table-column label="理赔状态">
        <template slot-scope="scope">
          <el-button size="mini">{{ claimsState(scope.row.state) }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="理赔图片">
        <template slot-scope="scope">
          <img
            :src="'http://localhost:3000/images/' + scope.row.images"
            alt=""
            width="50"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              $router.push('/System/UpdateSalesmansClaims/' + scope.row._id)
            "
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="delSaleClaims(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage + 1"
        :page-sizes="[1, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "salesmansclaims"
);
export default {
  created() {
    this.getSaleClaims();
  },
  computed: {
    ...mapState(["claims", "pageData"]),
  },
  methods: {
    ...mapMutations(["changeCurrentPage","changePageSize"]),
    ...mapActions(["getSaleClaims", "delSaleClaims"]),
    claimsState(state) {
      switch (state) {
        case 1:
          return "理赔申请中";
          break;
        case 2:
          return "理赔成功";
          break;
        case 3:
          return "理赔失败";
          break;
      }
    },
    handleSizeChange(val) {
      this.changePageSize(val);
      this.getSaleClaims();
    },

    //翻页
    handleCurrentChange(val) {
      this.changeCurrentPage(val - 1);
      this.getSaleClaims();
    },
  },
};
</script>
<style lang='scss' scoped>
#clamis {
  .clamis {
    font-size: 18px;
    font-weight: lighter;
    margin: 10px 0;
  }
}
</style>